<template>
  <section class="component create-order">
    <el-form :model="model" ref="create-order">
      <el-row align="24">
        <el-col :span="12">
          <el-form-item label="会员" prop="isMember" :rules="[{required: true, message: '请选择是否会员', trigger: 'blur'}]">
            <el-select size="small" v-model="model.isMember">
              <el-option v-for="{code,name} in this.$dict.getDict(DictType.WhetherStatus)" :key="code" :label="name" :value="code"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="model.isMember === 'YES'">
          <el-form-item label="会员编号" prop="memberNo" :rules="[{required: true, message: '请输入会员编号', trigger: 'blur'}]">
            <el-input v-model="model.memberNo"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="model.isMember === 'NO'">
          <el-form-item label="消费金额" prop="amount" :rules="[{required: true, message: '请输入消费金额', trigger: 'blur'}]">
            <el-input type="number" v-model="model.amount"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row align="24">
        <el-col :span="12">
          <el-form-item label="名称" prop="name">
            <el-input v-model="model.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="model.phone"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row align="24">
        <el-col :span="12">
          <el-form-item label="支付方式" prop="payType" :rules="[{required: true, message: '请选择支付方式', trigger: 'blur'}]">
            <el-select size="small" v-model="model.payType">
              <el-option v-for="{code,name} in this.$dict.getDict(DictType.PayType)" :key="code" :label="name" :value="code"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="支付渠道" prop="payChannel" :rules="[{required: true, message: '请选择支付渠道', trigger: 'blur'}]">
           <el-select size="small" v-model="model.payChannel">
              <el-option v-for="{code,name} in this.$dict.getDict(DictType.PayChannel)" :key="code" :label="name" :value="code"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row align="24">
        <el-col :span="12">
          <el-form-item label="美发师工号" prop="hairdresserUserName" :rules="[{required: true, message: '请输入美发师工号', trigger: 'blur'}]">
            <el-input v-model="model.hairdresserUserName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="美发师姓名" prop="hairdresserName" :rules="[{required: true, message: '请输入美发师姓名', trigger: 'blur'}]">
            <el-input v-model="model.hairdresserName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-form-item label-width="0px">
        <el-row type="flex" justify="center">
          <el-button @click="close()">取消</el-button>
          <el-button @click="confirm()">确定</el-button>
        </el-row>
      </el-form-item>
    </el-form>

  </section>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import { Dependencies } from '~/core/decorator'
import { Prop, Emit } from 'vue-property-decorator'
import { DictType } from '~/config/enum/dict/dict-type.enum';
import { OrderService } from '~/service/service-order/order.service';

@Component({
  components: {
  }
})
export default class CreateOrder extends Vue {
  @Dependencies(OrderService)
  private orderService: OrderService

  private DictType: any = DictType

  private model: any = {
    isMember: 'NO',
    memberNo: '',
    amount: 0,
    name: '',
    phone: '',
    payType: '',
    payChannel: '',
    hairdresserUserName: '',
    hairdresserName: ''
  }

  @Emit('close')
  public close() {}
  @Emit('refreshData')
  public refreshData() {}

  /**
   * 确定
   */
  private confirm() {
    let addForm: any = this.$refs['create-order']
    addForm.validate((valid)=> {
      if (valid) {
        const param: any = {
          ...this.model
        }
        this.orderService.createOrder(param).subscribe(
          data => {
            this.refreshData()
            this.close()
            this.$message.success('创建成功')
          },
          error => this.$message.error(error.msg)
        )
      }
    })
  }

  private refresh() {
    let addForm: any = this.$refs['create-order']
    addForm.resetFields()
  }
}
</script>
<style lang="less" scoped>
</style>